<template>
  <v-app class="bookmark-page">
    <v-container class="pa-2 h-100 position-relative d-flex flex-column">
      <div class="mb-2">
        <v-text-field
          v-model="searchQuery"
          bg-color="surface"
          class="me-2"
          clearable
          hide-details
          :placeholder="t('bm.search')"
          :prepend-inner-icon="mdiMagnify"
          rounded
          variant="outlined"
          @input="onSearchInput"
        />
      </div>
      <v-card class="position-relative">
        <div class="d-flex justify-space-between pl-1">
          <v-breadcrumbs class="px-0 pb-3" density="compact" :items="breadcrumbItems">
            <template #divider>
              <v-icon :icon="mdiChevronRight" />
            </template>
            <template #item="{ item }">
              <v-breadcrumbs-item
                :disabled="(item as any).disabled"
                :title="(item as any).title"
                @click="navigateToFolder((item as any).folderId)"
              >
                <v-icon
                  v-if="(item as any).icon"
                  class="me-1"
                  :icon="(item as any).icon"
                  size="small"
                />
                {{ (item as any).title }}
              </v-breadcrumbs-item>
            </template>
          </v-breadcrumbs>
          <div>
            <v-menu>
              <template #activator="{ props }">
                <v-btn
                  v-bind="props"
                  class="me-2"
                  :icon="mdiImport"
                  :title="t('bm.import')"
                  variant="text"
                />
              </template>
              <v-list rounded="lg">
                <v-list-item @click="onImport('chrome')">
                  <template #prepend>
                    <v-icon :icon="mdiImport" />
                  </template>
                  <v-list-item-title>{{ t('bm.import-chrome') }}</v-list-item-title>
                </v-list-item>
                <v-list-item @click="onImport('edge')">
                  <template #prepend>
                    <v-icon :icon="mdiImport" />
                  </template>
                  <v-list-item-title>{{ t('bm.import-edge') }}</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>
          </div>
        </div>

        <v-virtual-scroll :item-height="40" :items="nodeList" style="width: 100%; height: 100%">
          <template #default="{ item }">
            <folder-item v-if="!item.link" :node="item" @click="navigateToFolder(item._id)" />
            <book-item v-else :node="item" />
          </template>
        </v-virtual-scroll>
      </v-card>
    </v-container>

    <!--    <v-main>
          <v-app-bar color="" elevation="1" flat rounded="lg">
            <v-container
              class="d-flex align-center pl-2 justify-space-between"
              :style="{ maxWidth: MAIN_CONTENT_MAX_WIDTH_PX }"
            >
              <v-text-field
                v-model="searchQuery"
                class="me-2"
                clearable
                hide-details
                :placeholder="t('bm.search')"
                :prepend-inner-icon="mdiMagnify"
                style="min-width: 220px"
                variant="underlined"
                @input="onSearchInput"
              />
              <div>
                <v-chip v-if="lastSyncAt" class="me-2" color="primary" size="small" variant="tonal">
                  {{ t('bm.last-sync') }}: {{ formatTime(lastSyncAt) }}
                </v-chip>

                <v-menu>
                  <template #activator="{ props }">
                    <v-btn
                      v-bind="props"
                      class="me-2"
                      :icon="mdiImport"
                      :title="t('bm.import')"
                      variant="text"
                    />
                  </template>
                  <v-list rounded="lg">
                    <v-list-item @click="onImport('chrome')">
                      <template #prepend>
                        <v-icon :icon="mdiImport" />
                      </template>
                      <v-list-item-title>{{ t('bm.import-chrome') }}</v-list-item-title>
                    </v-list-item>
                    <v-list-item @click="onImport('edge')">
                      <template #prepend>
                        <v-icon :icon="mdiImport" />
                      </template>
                      <v-list-item-title>{{ t('bm.import-edge') }}</v-list-item-title>
                    </v-list-item>
                  </v-list>
                </v-menu>

                <v-btn color="primary" :icon="mdiPlus" variant="text" @click="openAddMenu" />
              </div>
            </v-container>
          </v-app-bar>
        </v-main>-->

    <!--    <v-main class="flex-grow-1 position-relative">
          <v-progress-linear
            v-if="isLoading"
            class="position-absolute"
            color="primary"
            indeterminate
            style="top: 0; left: 0; right: 0; z-index: 10"
          />

          <v-container
            v-if="!isLoading && items.length === 0 && folders.length === 0"
            class="d-flex align-center justify-center"
            :style="{ height: 'calc(100vh - 80px)', maxWidth: MAIN_CONTENT_MAX_WIDTH_PX }"
          >
            <v-empty-state
              :icon="mdiBookmarkMultiple"
              :text="t('bm.empty-text')"
              :title="t('bm.empty-title')"
            />
          </v-container>

          <v-container v-else class="pt-3 pb-6" :style="{ maxWidth: MAIN_CONTENT_MAX_WIDTH_PX }">
            &lt;!&ndash; 面包屑导航 &ndash;&gt;
            <v-breadcrumbs class="px-0 pb-3 position-sticky top-0" :items="breadcrumbItems">
              <template #divider>
                <v-icon :icon="mdiChevronRight" />
              </template>
              <template #item="{ item }">
                <v-breadcrumbs-item
                  :disabled="item.disabled"
                  :title="item.title"
                  @click="navigateToFolder(item.folderId)"
                >
                  <v-icon v-if="item.icon" class="me-1" :icon="item.icon" size="small" />
                  {{ item.title }}
                </v-breadcrumbs-item>
              </template>
            </v-breadcrumbs>

            &lt;!&ndash; 当前文件夹内容 &ndash;&gt;
            <v-sheet
              border
              class="pa-3"
              rounded="lg"
              @dragover.prevent
              @drop.prevent="onDropToFolder(currentFolderId)"
            >
              <v-list density="compact" nav>
                <template v-for="node in nodeList" :key="node._id">
                  <folder-item v-if="node.url" :node="node" />
                  <book-item v-else :node="node" />
                </template>
              </v-list>
              &lt;!&ndash; 子文件夹列表 &ndash;&gt;
              &lt;!&ndash;          <div v-if="currentFolderSubfolders.length > 0" class="mb-4">
                          <h3 class="text-subtitle-2 mb-2 text-medium-emphasis">
                            {{ t('bm.folders') }}
                          </h3>
                          <div class="folder-grid">
                            <div
                              v-for="folder in currentFolderSubfolders"
                              :key="folder._id"
                              class="folder-card"
                              @click="navigateToFolder(folder._id)"
                              @dragover.prevent
                              @drop.prevent="onDropToFolder(folder._id)"
                            >
                              <v-icon class="folder-icon" :icon="mdiFolderOutline" size="48" />
                              <div class="folder-name">{{ folder.name }}</div>
                              <div class="folder-actions" @click.stop>
                                <v-btn
                                  density="compact"
                                  :icon="mdiPencil"
                                  size="x-small"
                                  variant="text"
                                  @click="openEditFolder(folder)"
                                />
                                <v-btn
                                  color="error"
                                  density="compact"
                                  :icon="mdiDelete"
                                  size="x-small"
                                  variant="text"
                                  @click="removeFolder(folder)"
                                />
                              </div>
                            </div>
                          </div>
                        </div>&ndash;&gt;

              &lt;!&ndash; 书签列表 &ndash;&gt;
              &lt;!&ndash;          <div v-if="currentFolderBookmarks.length > 0">
                          <h3 class="text-subtitle-2 mb-2 text-medium-emphasis">
                            {{ t('bm.bookmarks') }}
                          </h3>
                          <div class="bookmark-list">
                            <div
                              v-for="bookmark in currentFolderBookmarks"
                              :key="bookmark._id"
                              class="bookmark-item"
                              draggable="true"
                              @click="selectBookmark(bookmark)"
                              @dragstart="onDragStart(bookmark)"
                            >
                              <v-avatar class="bookmark-favicon me-3" rounded size="20">
                                <img alt="" :src="faviconUrl(bookmark.url)" />
                              </v-avatar>
                              <div class="bookmark-info">
                                <div class="bookmark-title">{{ bookmark.title || bookmark.url }}</div>
                                <div class="bookmark-url">{{ bookmark.url }}</div>
                              </div>
                              <div class="bookmark-actions" @click.stop>
                                <v-btn
                                  density="compact"
                                  :icon="mdiPencil"
                                  size="x-small"
                                  variant="text"
                                  @click="openEdit(bookmark)"
                                />
                                <v-btn
                                  color="error"
                                  density="compact"
                                  :icon="mdiDelete"
                                  size="x-small"
                                  variant="text"
                                  @click="remove(bookmark)"
                                />
                              </div>
                            </div>
                          </div>
                        </div>&ndash;&gt;

              &lt;!&ndash; 空状态 &ndash;&gt;
              <div
                v-if="currentFolderSubfolders.length === 0 && currentFolderBookmarks.length === 0"
                class="empty-folder"
              >
                <v-icon :icon="mdiFolderOutline" size="64" />
                <p class="text-medium-emphasis mt-2">{{ t('bm.empty-folder') }}</p>
              </div>
            </v-sheet>
          </v-container>
        </v-main>-->
    <!--
        &lt;!&ndash; 添加/编辑书签对话框 &ndash;&gt;
        <v-dialog v-model="bookmarkDialogVisible" max-width="520">
          <v-card>
            <v-card-title>
              <v-icon class="me-2" color="primary" :icon="mdiBookmarkMultiple" />
              {{ editingBookmark ? t('bm.edit-bookmark') : t('bm.add-bookmark') }}
            </v-card-title>
            <v-card-text>
              <v-text-field
                v-model="bookmarkForm.title"
                class="mb-2"
                :label="t('bm.form.title')"
                variant="outlined"
              />
              <v-text-field
                v-model="bookmarkForm.url"
                class="mb-2"
                :disabled="editingBookmark"
                label="URL"
                variant="outlined"
              />
              <v-select
                v-model="bookmarkForm.folder_id"
                class="mb-2"
                clearable
                item-title="label"
                item-value="value"
                :items="folderSelectItems"
                :label="t('bm.form.folder')"
                variant="outlined"
              />
              <v-textarea
                v-model="bookmarkForm.description"
                auto-grow
                :label="t('bm.form.desc')"
                rows="2"
                variant="outlined"
              />
            </v-card-text>
            <v-card-actions>
              <v-spacer />
              <v-btn variant="text" @click="bookmarkDialogVisible = false"
                >{{ t('common.cancel') }}
              </v-btn>
              <v-btn color="primary" variant="flat" @click="saveBookmark"
                >{{ t('common.confirm') }}
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>

        &lt;!&ndash; 添加/编辑文件夹对话框 &ndash;&gt;
        <v-dialog v-model="folderDialogVisible" max-width="520">
          <v-card>
            <v-card-title>
              <v-icon class="me-2" color="primary" :icon="mdiFolderOutline" />
              {{ editingFolder ? t('bm.edit-folder') : t('bm.add-folder') }}
            </v-card-title>
            <v-card-text>
              <v-text-field
                v-model="folderForm.name"
                class="mb-2"
                :label="t('bm.folder-name')"
                variant="outlined"
              />
              <v-select
                v-model="folderForm.parent_id"
                class="mb-2"
                clearable
                item-title="label"
                item-value="value"
                :items="folderSelectItems"
                :label="t('bm.parent-folder')"
                variant="outlined"
              />
            </v-card-text>
            <v-card-actions>
              <v-spacer />
              <v-btn variant="text" @click="folderDialogVisible = false"
                >{{ t('common.cancel') }}
              </v-btn>
              <v-btn color="primary" variant="flat" @click="saveFolder"
                >{{ t('common.confirm') }}
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>

        &lt;!&ndash; 添加菜单 &ndash;&gt;
        <v-menu v-model="addMenuVisible" location="bottom">
          <template #activator="{ props: menuProps }">
            <v-btn
              v-bind="menuProps"
              color="primary"
              :icon="mdiPlus"
              style="display: none"
              variant="text"
            />
          </template>
          <v-list>
            <v-list-item @click="openAddBookmark(null)">
              <template #prepend>
                <v-icon :icon="mdiBookmarkMultiple" />
              </template>
              <v-list-item-title>{{ t('bm.add-bookmark') }}</v-list-item-title>
            </v-list-item>
            <v-list-item @click="openAddFolder(null)">
              <template #prepend>
                <v-icon :icon="mdiFolderOutline" />
              </template>
              <v-list-item-title>{{ t('bm.add-folder') }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>-->
  </v-app>
</template>

<script lang="ts" setup>
import { mdiChevronRight, mdiHome, mdiImport, mdiMagnify } from '@mdi/js'
import { computed, onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useBookmarkManagerStore } from '@/stores/bookmarkManager'
import userApi from '@/ajax/user'

const { t, locale } = useI18n()
const bm = useBookmarkManagerStore()
const items = computed(() => bm.items)
const folders = computed(() => bm.folders)
const isLoading = computed(() => bm.isLoading)

const searchQuery = ref('')
const syncing = ref(false)
const lastSyncAt = ref<number | null>(null)

// 当前文件夹导航状态
const currentFolderId = ref<string | null>(null)

// 书签对话框
const bookmarkDialogVisible = ref(false)
const editingBookmark = ref(false)
const editingBookmarkId = ref<string | null>(null)
const bookmarkForm = ref({
  title: '',
  url: '',
  description: '',
  folder_id: null as string | null
})

// 文件夹对话框
const folderDialogVisible = ref(false)
const editingFolder = ref(false)
const editingFolderId = ref<string | null>(null)
const folderForm = ref({
  name: '',
  parent_id: null as string | null
})

// 添加菜单
const addMenuVisible = ref(false)

// 计算当前文件夹的子文件夹
const currentFolderSubfolders = computed(() => {
  return folders.value
    .filter(f => f.parent_id === currentFolderId.value)
    .sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0))
})

// 计算当前文件夹的书签
const currentFolderBookmarks = computed(() => {
  const keyword = (searchQuery.value || '').trim().toLowerCase()
  return items.value
    .filter((b: any) => b.folder_id === currentFolderId.value)
    .filter((b: any) => {
      if (!keyword) return true
      return (
        (b.title || '').toLowerCase().includes(keyword) ||
        (b.url || '').toLowerCase().includes(keyword)
      )
    })
    .sort((a: any, b: any) => (a.sort ?? 0) - (b.sort ?? 0))
})

// 面包屑导航
const breadcrumbItems = computed(() => {
  const items: {
    title: string
    folderId: string | null
    disabled: boolean
    icon?: string
  }[] = []

  // 添加根节点
  items.push({
    title: t('bm.all-bookmarks'),
    folderId: null,
    disabled: currentFolderId.value === null,
    icon: mdiHome
  })

  // 构建路径
  if (currentFolderId.value) {
    const path: any[] = []
    let folderId: string | null = currentFolderId.value

    while (folderId) {
      const folder = folders.value.find(f => f._id === folderId)
      if (!folder) break
      path.unshift(folder)
      folderId = folder.parent_id || null
    }

    for (const folder of path) {
      items.push({
        title: folder.name,
        folderId: folder._id,
        disabled: folder._id === currentFolderId.value
      })
    }
  }

  return items
})
const nodeList = computed(() => {
  let children = currentFolderSubfolders.value,
    bookmarks = currentFolderBookmarks.value
  if (!currentFolderId.value) {
    children = folders.value.filter(f => !f.parent_id)
    bookmarks = items.value.filter((b: any) => !b.folder_id)
  }
  return [...children, ...bookmarks].sort((a, b) => {
    const ai = a.sort ?? Number.MAX_SAFE_INTEGER
    const bi = b.sort ?? Number.MAX_SAFE_INTEGER
    return ai - bi
  }) as any[]
})

// 导航到文件夹
function navigateToFolder(folderId: string | null) {
  currentFolderId.value = folderId
}

// 选择书签
function selectBookmark(bookmark: any) {
  // 可以在这里添加书签选择的逻辑，比如打开详情面板
  console.log('Selected bookmark:', bookmark)
}

// 拖放操作
const draggingId = ref<string | null>(null)

function onDragStart(bookmark: any) {
  draggingId.value = bookmark._id
}

async function onDropToFolder(targetFolderId: string | null) {
  const dragging = draggingId.value
  if (!dragging) return

  const bookmark = items.value.find((b: any) => b._id === dragging)
  if (!bookmark) return

  // 如果已经在目标文件夹中，不做任何操作
  if ((bookmark.folder_id || null) === targetFolderId) {
    draggingId.value = null
    return
  }

  // 移动书签到目标文件夹
  await bm.updateBookmark({ _id: dragging, folder_id: targetFolderId })
  await bm.loadBookmarks()
  draggingId.value = null
}

// 工具函数
function faviconUrl(u?: string) {
  try {
    const url = new URL(u || '')
    return `https://www.google.com/s2/favicons?sz=32&domain=${url.hostname}`
  } catch {
    return `https://www.google.com/s2/favicons?sz=32&domain=example.com`
  }
}

function formatTime(ts?: number | null) {
  if (!ts) return '-'
  const d = new Date(ts)
  return new Intl.DateTimeFormat(locale.value, {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  }).format(d)
}

// 文件夹选择下拉列表
const folderSelectItems = computed(() => {
  const result: Array<{ label: string; value: string | null }> = []
  result.push({ label: t('bm.unfiled'), value: null })

  function walk(parentId: string | null, prefix: string) {
    const children = folders.value
      .filter(f => (parentId === null ? !f.parent_id : f.parent_id === parentId))
      .sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0))

    for (const folder of children) {
      // 如果正在编辑文件夹，排除自己和子文件夹
      if (editingFolder.value && editingFolderId.value && folder._id === editingFolderId.value)
        continue
      // TODO: 检查是否是子文件夹
      const label = prefix + folder.name
      result.push({ label, value: folder._id })
      walk(folder._id, label + ' / ')
    }
  }

  walk(null, '')
  return result
})

// 搜索
let searchTimeout: NodeJS.Timeout | null = null

function onSearchInput() {
  if (searchTimeout) clearTimeout(searchTimeout)
  searchTimeout = setTimeout(() => {
    bm.loadBookmarks({ keyword: searchQuery.value.trim() || undefined })
  }, 300)
}

// 书签操作
function openAddMenu() {
  addMenuVisible.value = true
}

function openAddBookmark(folderId: string | null = null) {
  editingBookmark.value = false
  editingBookmarkId.value = null
  bookmarkForm.value = {
    title: '',
    url: '',
    description: '',
    folder_id: folderId ?? currentFolderId.value
  }
  bookmarkDialogVisible.value = true
  addMenuVisible.value = false
}

function openEdit(bookmark: any) {
  editingBookmark.value = true
  editingBookmarkId.value = bookmark._id
  bookmarkForm.value = {
    title: bookmark.title || '',
    url: bookmark.url || '',
    description: bookmark.description || '',
    folder_id: bookmark.folder_id || null
  }
  bookmarkDialogVisible.value = true
}

async function saveBookmark() {
  if (!bookmarkForm.value.title || !bookmarkForm.value.url) return

  if (editingBookmark.value && editingBookmarkId.value) {
    const ok = await bm.updateBookmark({
      _id: editingBookmarkId.value,
      title: bookmarkForm.value.title,
      folder_id: bookmarkForm.value.folder_id
    })
    if (ok) bookmarkDialogVisible.value = false
  } else {
    const ok = await bm.addBookmark({
      link: bookmarkForm.value.url,
      title: bookmarkForm.value.title,
      folder_id: bookmarkForm.value.folder_id
    })
    if (ok) bookmarkDialogVisible.value = false
  }
}

async function remove(bookmark: any) {
  if (!confirm(t('bm.confirm-delete-bookmark'))) return
  await bm.deleteBookmark(bookmark._id)
}

// 文件夹操作
function openAddFolder(parentId: string | null = null) {
  editingFolder.value = false
  editingFolderId.value = null
  folderForm.value = {
    name: '',
    parent_id: parentId ?? currentFolderId.value
  }
  folderDialogVisible.value = true
  addMenuVisible.value = false
}

function openEditFolder(folder: any) {
  editingFolder.value = true
  editingFolderId.value = folder._id
  folderForm.value = {
    name: folder.name || '',
    parent_id: folder.parent_id || null
  }
  folderDialogVisible.value = true
}

async function saveFolder() {
  if (!folderForm.value.name) return

  if (editingFolder.value && editingFolderId.value) {
    const res = await bm.updateFolder({
      _id: editingFolderId.value,
      name: folderForm.value.name,
      parent_id: folderForm.value.parent_id
    })
    if (res.success) folderDialogVisible.value = false
  } else {
    const res = await bm.addFolder({
      name: folderForm.value.name,
      parent_id: folderForm.value.parent_id
    })
    if (res.success) folderDialogVisible.value = false
  }
}

async function removeFolder(folder: any) {
  if (!confirm(t('bm.confirm-delete-folder'))) return
  const res = await bm.deleteFolder(folder._id)
  // 如果删除的是当前文件夹，返回上一级
  if (res.success && currentFolderId.value === folder._id) {
    currentFolderId.value = folder.parent_id || null
  }
}

// 导入和同步
async function onImport(browser: 'chrome' | 'edge') {
  const res = browser === 'chrome' ? await bm.importFromChrome({}) : await bm.importFromEdge({})
  if ((res as any)?.success) {
    await bm.loadBookmarks()
    await bm.loadFolders()
  }
}

async function onSync() {
  if (syncing.value) return
  syncing.value = true
  try {
    const cloud = await userApi.bookmarkList().catch(() => [])
    if (Array.isArray(cloud)) {
      await bm.syncFromCloud(cloud)
    }
    await bm.syncToCloud()
    lastSyncAt.value = Date.now()
  } catch (error) {
    console.warn('sync failed', error)
  } finally {
    syncing.value = false
  }
}

onMounted(() => {
  bm.loadBookmarks()
  bm.loadFolders()
})
</script>

<i18n>
{
  "en": {
    "bm": {
      "title": "Bookmarks",
      "search": "Search bookmarks...",
      "add": "Add",
      "add-bookmark": "Add Bookmark",
      "add-folder": "Add Folder",
      "edit": "Edit",
      "edit-bookmark": "Edit Bookmark",
      "edit-folder": "Edit Folder",
      "import": "Import",
      "import-chrome": "Import from Chrome",
      "import-edge": "Import from Edge",
      "sync-now": "Sync",
      "last-sync": "Last sync",
      "empty-title": "No bookmarks",
      "empty-text": "Your bookmarks will appear here",
      "empty-folder": "This folder is empty",
      "all-bookmarks": "All Bookmarks",
      "folders": "Folders",
      "bookmarks": "Bookmarks",
      "col-title": "Title",
      "col-folder": "Folder",
      "col-updated": "Updated",
      "unfiled": "Unfiled",
      "details": "Details",
      "folder-name": "Folder Name",
      "parent-folder": "Parent Folder",
      "items-count": "Items",
      "confirm-delete-bookmark": "Are you sure you want to delete this bookmark?",
      "confirm-delete-folder": "Are you sure you want to delete this folder? All bookmarks and subfolders will be moved to Unfiled.",
      "form": {
        "title": "Title",
        "folder": "Folder",
        "desc": "Description"
      }
    },
    "common": {
      "cancel": "Cancel",
      "confirm": "Confirm"
    }
  },
  "zhHans": {
    "bm": {
      "title": "书签",
      "search": "搜索书签...",
      "add": "新增",
      "add-bookmark": "添加书签",
      "add-folder": "添加文件夹",
      "edit": "编辑",
      "edit-bookmark": "编辑书签",
      "edit-folder": "编辑文件夹",
      "import": "导入",
      "import-chrome": "从 Chrome 导入",
      "import-edge": "从 Edge 导入",
      "sync-now": "同步",
      "last-sync": "上次同步",
      "empty-title": "暂无书签",
      "empty-text": "您的书签将显示在这里",
      "empty-folder": "此文件夹为空",
      "all-bookmarks": "所有书签",
      "folders": "文件夹",
      "bookmarks": "书签",
      "col-title": "标题",
      "col-folder": "文件夹",
      "col-updated": "更新时间",
      "unfiled": "未分类",
      "details": "详情",
      "folder-name": "文件夹名称",
      "parent-folder": "父文件夹",
      "items-count": "项目数",
      "confirm-delete-bookmark": "确定要删除此书签吗？",
      "confirm-delete-folder": "确定要删除此文件夹吗？所有书签和子文件夹将移至未分类。",
      "form": {
        "title": "标题",
        "folder": "文件夹",
        "desc": "描述"
      }
    },
    "common": {
      "cancel": "取消",
      "confirm": "确定"
    }
  }
}
</i18n>

<style scoped>
.bookmark-page {
  height: 100vh;
}

/* 文件夹网格 */
.folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}

.folder-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
  position: relative;
}

.folder-card:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.folder-icon {
  color: rgba(var(--v-theme-primary), 0.8);
  margin-bottom: 8px;
}

.folder-name {
  font-size: 14px;
  text-align: center;
  word-break: break-word;
  max-width: 100%;
}

.folder-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: none;
  gap: 4px;
}

.folder-card:hover .folder-actions {
  display: flex;
}

/* 书签列表 */
.bookmark-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bookmark-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
  position: relative;
}

.bookmark-item:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.bookmark-favicon {
  flex-shrink: 0;
}

.bookmark-info {
  flex: 1;
  min-width: 0;
}

.bookmark-title {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bookmark-url {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

.bookmark-actions {
  display: none;
  gap: 4px;
  margin-left: 8px;
}

.bookmark-item:hover .bookmark-actions {
  display: flex;
}

/* 空状态 */
.empty-folder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: rgba(0, 0, 0, 0.38);
}
</style>
